<template>
<div class="CommunicationContainer">
  <div class="sty">
    <!--    左侧导航-->
    <el-row class="tac">
      <el-col>
        <el-menu :default-openeds="['/communication']" :default-active="this.$router.path" class="el-menu-vertical-demo" router>
          <el-sub-menu index="/communication">
            <template #title>
              <strong style="font-size: 18px">消息</strong>
            </template>
            <el-menu-item-group>
              <el-menu-item index="systemNote">系统通知</el-menu-item>
            </el-menu-item-group>

            <el-menu-item-group>
              <el-menu-item index="interactNote">互动通知</el-menu-item>
            </el-menu-item-group>

            <el-menu-item-group>
              <el-menu-item index="orderNote">订单通知</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
    <!--    右侧数据-->
    <div class="sty2">
      <router-view></router-view>
    </div>
  </div>
</div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Communication",
});

</script>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
.CommunicationContainer{
  width: 1200px;
  background-color: #f5f7f9;
  margin: 0 auto;
}
.sty{
  width: 100%;
  height: 100%;
  display: flex;
  .tac{
    width: 200px;
    margin: 20px 20px;
    border-radius:25px;
    strong{
      display: inline-block;
      width: 199px;
      padding-left: 10px;
      border-left:4px solid #f93684
    }
  }
}
</style>
